<template>
  <a-layout class="layout">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <!-- 显示图标或者文字 -->
      <div class="logo"><home-outlined v-if="collapsed" /><span v-else>奇异管理系统</span></div>
      <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="current" mode="inline" theme="dark"
        :inline-collapsed="state.collapsed" :items="sider_menu" @click="siderMenuClick">
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="header">
        <!-- 显示控制图片 -->
        <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
        <a-menu v-model:selectedKeys="current" mode="horizontal" :items="header_menu" theme="dark"
          @click="headerMenuClick" />
      </a-layout-header>
      <a-layout-content :style="{ margin: '6px 6px', padding: '6px', background: '#fff' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import {
  HomeOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
  MessageOutlined,
  SettingOutlined
} from '@ant-design/icons-vue';
import { ref, reactive, watch, h, onMounted } from 'vue';
import { $getMineMenus } from '@/api/apis/aa';
import { $doLogout } from '@/api/apis/aa';
import { useRouter } from 'vue-router';

const $router = useRouter();
const systemCode = ref<string>("admin");

// 布局
const collapsed = ref<boolean>(false);
// 菜单默认选中项
const current = ref(['home']);
// 侧边菜单
const state = reactive({
  collapsed: false,
  selectedKeys: ['1'],
  openKeys: ['sub1'],
  preOpenKeys: ['sub1'],
});

watch(
  () => state.openKeys,
  (_val, oldVal) => {
    state.preOpenKeys = oldVal;
  },
);

const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;
  state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};

// 侧边菜单数据-通过onMounted后端获取
const sider_menu = reactive([]);

// 侧边菜单数据-本地
const sider_menu_items = reactive([
  {
    "key": "1",
    "icon": () => h(PieChartOutlined),
    "label": "Option 1",
    "title": "Option 1",
    "path": "/admin/table/list",
    "componentName": "/admin/table/list",
    "name": "/admin/table/list"
  },
  {
    "key": "2",
    "icon": () => h(DesktopOutlined),
    "label": "Option 2",
    "title": "Option 2",
    "path": "/admin/video/list",
    "componentName": "/admin/video/list",
    "name": "/admin/video/list"
  },
  {
    "key": "3",
    "icon": () => h(InboxOutlined),
    "label": "Option 3",
    "title": "Option 3"
  },
  {
    "key": "sub1",
    "icon": () => h(MailOutlined),
    "label": "Navigation One",
    "title": "Navigation One",
    "children": [
      {
        "key": "5",
        "label": "Option 5",
        "title": "Option 5",
      },
      {
        "key": "6",
        "label": "Option 6",
        "title": "Option 6"
      },
      {
        "key": "7",
        "label": "Option 7",
        "title": "Option 7"
      },
      {
        "key": "8",
        "label": "Option 8",
        "title": "Option 8"
      }
    ]
  },
  {
    "key": "sub2",
    "icon": () => h(AppstoreOutlined),
    "label": "Navigation Two",
    "title": "Navigation Two",
    "children": [
      {
        "key": "9",
        "label": "Option 9",
        "title": "Option 9"
      },
      {
        "key": "10",
        "label": "Option 10",
        "title": "Option 10"
      },
      {
        "key": "sub3",
        "label": "Submenu",
        "title": "Submenu",
        "children": [
          {
            "key": "11",
            "label": "Option 11",
            "title": "Option 11"
          },
          {
            "key": "12",
            "label": "Option 12",
            "title": "Option 12"
          }
        ]
      }
    ]
  }
]);

//顶部菜单数据-本地
const header_menu = ref([
  {
    key: 'home',
    icon: () => h(HomeOutlined),
    label: '首页',
    title: '管理平台首页',
    "path": "/admin/",
    "componentName": "/admin/home",
    "name": "/admin/home"
  },
  {
    key: 'setting',
    icon: () => h(SettingOutlined),
    label: '配置工具',
    title: '配置工具',
    children: [
      {
        type: 'group',
        label: '设置',
        children: [
          {
            label: '系统设置',
            key: 'settingSystem',
            title: '系统配置',
            "path": "/admin/setting/system",
            "componentName": "/admin/setting/system",
            "name": "/admin/setting/system"
          },
          {
            label: '配置中心',
            key: 'configSystem',
            title: '配置中心',
            "path": "/admin/setting/config",
            "componentName": "/admin/setting/config",
            "name": "/admin/setting/config"
          },
        ],
      },
      {
        type: 'group',
        label: '工具',
        children: [
          {
            label: '收藏夹',
            key: 'favorite',
            title: '收藏夹',
            "path": "/admin/setting/favorite",
            "componentName": "/admin/setting/favorite",
            "name": "/admin/setting/favorite"
          },
          {
            label: '工具箱',
            key: 'tools',
            title: '工具箱',
            "path": "/admin/setting/tools",
            "componentName": "/admin/setting/tools",
            "name": "/admin/setting/tools"
          },
        ],
      },
    ],
  },
  {
    key: 'msg',
    icon: () => h(MessageOutlined),
    label: '消息',
    title: '消息',
    "path": "/admin/msg/msg",
    "componentName": "/admin/msg/msg",
    "name": "/admin/msg/msg"
  },
  {
    key: 'userCentor',
    label: '用户中心',
    title: '用户中心',
    icon: () => h(UserOutlined),
    children: [
      {
        label: '用户信息',
        key: 'userInfo',
        "title": "用户信息",
        "path": "/admin/userinfo/info",
        "componentName": "/admin/userinfo/info",
        "name": "/admin/userinfo/info"
      },
      {
        label: '修改密码',
        key: 'modifyPassword',
        "title": "密码",
        "path": "/admin/userinfo/password",
        "componentName": "/admin/userinfo/password",
        "name": "/admin/userinfo/password"
      },
      {
        label: '退出系统',
        key: 'exit',
      },
    ],
  },
]);

//初始化侧边菜单和顶部菜单，并放入sessionStorage
onMounted(() => {
  let sysCode = systemCode.value
  $getMineMenus({ "systemCode": "admin" }).then((result) => {
    let { msg, data } = result
    if (data.menuList) {
      sessionStorage.setItem("authInfo", JSON.stringify(data))
      addDynamicRoute(data.menuList)
      data.menuList.forEach(itemEnum => {
        sider_menu.push(itemEnum)
      })
    }
  })
  sessionStorage.setItem("head_menu", JSON.stringify(header_menu.value))
  addDynamicRoute(header_menu.value)
});

function addDynamicRoute(data) {
  data.forEach(item => {
    if (item.path && item.name && item.componentName) {
      $router.addRoute('admin', {
        path: item.path,
        name: item.name,
        meta: {
          title: item.title
        },
        component: () => import('../components/' + item.componentName + '.vue')
      })
    }
    if (item.children) {
      addDynamicRoute(item.children)
    }
  });
}

//顶部菜单点击
function headerMenuClick({ item, key, keyPath }) {
  if (key == "exit") {
    $doLogout(key).then((ret) => {
      if (ret) {
        $router.push('/');
      }
    });
  } else {
    $router.push(item.path)
  }
};

//侧边菜单点击
function siderMenuClick({ item, key, keyPath }) {
  $router.push(item.path)
};

</script>

<style scoped lang="css">
.layout {
  width: 100vm;
  height: 120vh;
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  color: #ffffa6;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  font-size: 18px;
  overflow: hidden;
}

.header {
  padding: 0;
  display: flex;
  justify-content: space-between;
  background: #001529;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>